<template>
  <div class="salary-container">
    <el-calendar v-model="value">
      <template #dateCell="{ date, data }">
        <!-- <el-row v-if="date.getMonth() !== value.getMonth()"> -->
        <!-- <span v-if="isweek(date)"></span> -->
        {{ data.day.slice(-2) }}
        <div>{{ solarToLunar(date, data) }}</div>
        <!-- </el-row> -->
      </template>
    </el-calendar>
  </div>
</template>

<script>
import { calendar } from '@/utils/calendar'
export default {
  name: 'Salary',
  data() {
    return {
      value: new Date()
    }
  },
  created() {},
  methods: {
    // 转农历的函数
    solarToLunar(slotDate, slotData) {
      const solarDayArr = slotData.day.split('-')
      console.log(solarDayArr)

      const lunarDay = calendar.solar2lunar(
        solarDayArr[0],
        solarDayArr[1],
        solarDayArr[2]
      )
      // 农历日期
      let lunarMD = lunarDay.IMonthCn + lunarDay.IDayCn
      if (lunarMD.includes('初一')) {
        // 每月初一 显示当前月 如正月初一 显示"正月"
        lunarMD = lunarMD.substr(0, 2)
      } else {
        // 每月初一以外 不显示当前月 如正月初十 显示"初十"
        lunarMD = lunarMD.slice(2)
      }
      // 公历节日\农历节日\农历节气
      let festAndTerm = []
      festAndTerm.push(
        lunarDay.festival == null ? '' : ' ' + lunarDay.festival
      )
      festAndTerm.push(
        lunarDay.lunarFestival == null ? '' : '' + lunarDay.lunarFestival
      )
      festAndTerm.push(lunarDay.Term == null ? '' : '' + lunarDay.Term)
      festAndTerm = festAndTerm.join('')
      let result = ''
      if (festAndTerm === '') {
        result = lunarMD
      } else {
        result = festAndTerm
      }
      return result
    }
  }
}
</script>

<style lang="scss" scoped>
.avatar {
  height: 45px;
  width: 45px;
  border-radius: 50%;
  line-height: 45px;
  text-align: center;
  color: #fff;
  background-color: #04c9be;
  font-size: 12px;
  display: inline-block;
}
</style>
